<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="searchTitle" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      highlight-current-row
      border
      lazy
      :load="getChildren"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @current-change="selectChange"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column
        prop="title"
        label="名称"
        width="180"
      />
      <el-table-column
        prop="actionName"
        label="ActionName"
        width="120"
      />
      <el-table-column
        prop="controllerName"
        label="Controller"
        width="120"
      />
      <el-table-column
        prop="method"
        label="请求方式"
        width="120"
      />
      <el-table-column
        prop="url"
        label="前端url"
      />
      <el-table-column
        prop="icon"
        label="图标"
        width="100"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>

          <el-popconfirm
            class="btnspace"
            title="确定删除吗？"
            @onConfirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!-- 添加窗口 -->
    <el-drawer :visible.sync="openedWin">
      <template slot="title"><h3>{{ optype=="create"?'添加':'修改' }}</h3></template>
      <component :is="optype" :funcdata="currentFun" @closeWin="closeDrawer" />
      <!-- <create :parent="currentFun" @closeWin="closeDrawer" /> -->
    </el-drawer>
  </div>
</template>
<script>
import request from '@/utils/request'
import create from './create'
import edit from './edit'
export default {
  components: {
    create, edit
  },
  data() {
    return {
      searchTitle: '', // 搜索关键字
      openedWin: false, // 打开对话框
      list: [],
      currentFun: {}, // 当前选中的行
      optype: 'edit' // 操作类型 create还是edit
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询
    handleFilter() {

    },
    // 新增
    handleCreate() {
      this.currentFun = {}
      this.optype = 'create'
      this.openedWin = true
    },
    // 修改
    handleEdit(index, row) {
      this.currentFun = row
      this.optype = 'edit'
      this.openedWin = true
    },
    // 删除
    async handleDelete(index, row) {
      await request({ url: 'functions/' + row.id, method: 'delete' })
      this.getList()
    },
    // 加载列表
    getList(parentId) {
      const pid = parentId || 0
      request({
        url: 'functions/' + pid,
        method: 'get'
      }).then(res => {
        this.list = res
      })
    },
    // 加载子节点
    getChildren(row, treeNode, resolve) {
      request({
        url: 'Functions/' + row.id,
        method: 'get'
      }).then(res => {
        resolve(res)
      })
    },
    // 当前选择行
    selectChange(row, old) {
      this.currentFun = row
    },
    // 关闭抽屉
    closeDrawer(reflash) {
      this.openedWin = false
      if (reflash) {
        this.getList()
      }
    }
  }
}
</script>
<style scoped>
  .btnspace{
    margin-left: 10px;
  }
</style>
